<template>
    <div class="app-container">
        <levelbar></levelbar>
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="80px" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="视频名称" prop="videoName">
                            <el-input v-model="query.sVideoName" :maxlength="30" placeholder="请输入视频名称" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="付费形式" prop="paymentForm">
                            <el-select v-model="query.sPayType" placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in query.sPayTypeList" :key='item.value' :label='item.label' :value='item.value'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属分类" prop="classify">
                            <el-select v-model="query.fTypeId" placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in query.fTypeIdList" :key='item.pId' :label='item.sName' :value='item.pId'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="创建日期" prop="creatTime">
                            <el-date-picker v-model="query.time" type="date" placeholder="请选择" :editable='false' style="width:100%;"></el-date-picker>
                        </el-form-item>  
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态" prop="state">
                            <el-select v-model="query.sStatus" placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in query.sStatusList" :key='item.value' :label='item.label' :value='item.value'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <span class="table-title-span">
                    <el-button @click="batchDelete()">批量删除</el-button>
                    <el-button @click="addVideo()">添加视频</el-button>
                </span>
            </div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" :selectable="fn" align="center"></el-table-column>
    
                <el-table-column label="视频名称" align="center">
                    <template scope="scope">
                        <span class="link-src" @click="readVideo(scope.row)">{{!scope.row.sVideoName ? '--' : scope.row.sVideoName}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="付费形式" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sPayType == '0' ? '免费' : '优惠'}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="所属分类" align="center">
                    <template scope="scope">
                        <span>{{!scope.row.typeName ? '--' : scope.row.typeName}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="创建人" align="center">
                    <template scope="scope">
                        <span>{{!scope.row.createName ? '--' : scope.row.createName}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="创建时间" width="170" align="center">
                    <template scope="scope">
                         <span>{{ scope.row.sCreateTime?scope.row.sCreateTime.substr(0, 16):'--' }}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="浏览量" align="center">
                    <template scope="scope">
                        <span>{{ !scope.row.sVisitNum ? '--' : scope.row.sVisitNum}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="状态" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sStatus == '0' ? '下架' : scope.row.sStatus == '1' ? '上架' : '--'}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="评论" align="center">
                    <template scope="scope">
                        <span>{{!scope.row.commentNum ? '--' : scope.row.commentNum}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="权重" align="center">
                    <template scope="scope">
                        <span>{{ !scope.row.sPriority ? '--' : scope.row.sPriority }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="200px">
                    <template scope="scope">
                        <span v-if="scope.row.sStatus == '1'">
                            <el-button type="text" class="btn-success" @click="unShelve(scope.row)">下架</el-button>
                        </span>
                        <span v-if="scope.row.sStatus == '0'">
                            <el-button type="text" class="btn-success" @click="upShelve(scope.row)">上架</el-button>
                            <el-button type="text" class="btn-success" @click="edit(scope.row)">编辑</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import { listAdvertByCondition, pageScholar, updateScholarStatus, deleteBatchScholar } from 'api/eStudyBug';
    import { mapGetters, mapState, mapActions } from 'vuex';
    import moment from 'moment';
    export default {
        name: 'eStudybug',
        components: { Levelbar, TableLayout },
        data() {
            return { 
                loading: false,  
                stateList: [{
                    value: '',
                    label: '请选择'
                }, {
                    value: '0',
                    label: '上架'
                }, {
                    value: '1',
                    label: '下架'
                }],
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 1
                },
                query: {
                    fTypeId: '',
                    // 所属分类集合
                    fTypeIdList: [],
                    sVideoName: '',
                    sPayType: '',
                    // 付费方式集合
                    sPayTypeList: [{
                        value: '',
                        label: '请选择'  
                    }, {
                        value: '0',
                        label: '免费'
                    }, {
                        value: '1',
                        label: '优惠'
                    }],
                    time: '',
                    sStatus: '',
                    // 状态
                    sStatusList: [
                        {
                            value: '',
                            label: '请选择'
                        },
                        {
                            value: '0',
                            label: '下架'
                        },
                        {
                            value: '1',
                            label: '上架'
                        }
                    ]
                },
                multipleSelection: []
            }
        },
        created() {
            listAdvertByCondition().then(data => {
                this.query.fTypeIdList = data.data.content;
                this.query.fTypeIdList.unshift({pId: '', sName: '请选择'})
            })
            this.queryData();
        },
        computed: {
            ...mapGetters([
                'uid'
            ]),
            ...mapState({
                config: state => state.config.table,
                cacheUpdated: state => state.app.cacheUpdated // 局部刷新列表
            })
        },
        watch: {// 局部刷新列表
            cacheUpdated(val) {
                val && this.queryData();
            }
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            onSubmit() {
                this.queryData();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            fn(row) {
                if (row.sStatus!=1) {
                    return true;
                } else {
                    return false;
                }
            },
            queryData() {

                pageScholar(
                    this.query.sVideoName,
                    this.query.sPayType,
                    this.query.fTypeId,
                    !this.query.time ? '' : moment(this.query.time).format('YYYY-MM-DD'),
                    this.query.sStatus,
                    this.pageQuery.currentpage,
                    this.config.pageSize,
                ).then(response => {
                    this.loading = false;
                    this.tableData = [];
                    if (response.data.content) {
                        this.tableData = response.data.content.list;
                        this.pageQuery.total = response.data.content.pagination.total;
                    }
                }).catch(Error => {
                    this.loading = false;
                })
            },

            // 删除功能
            deleteVideo(pid) {
                this.$confirm('确定删除选中视频？', '', {
                    closeOnClickModal: false,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: ' ', 
                    title: '  '
                }).then(() => {
                    this.loading = true;
                    deleteBatchScholar(pid).then(response => {
                        this.loading = false;
                        this.$message({
                            message: '删除成功！',
                            type: 'success'
                        });
                        this.queryData();
                        this.loading = false;
                    }).catch(Error => {
                        this.loading = false;
                    })
                }).catch((e) => {
                    this.loading = false;    
                });
            },
            
            // 批量删除
            batchDelete() {
                if (this.multipleSelection.length == 0) return this.$message('请选择需要删除的视频');
                let videoList = this.multipleSelection.reduce((pre, cur) => {
                    pre.push(cur.pId)
                    return pre
                }, [])
                this.deleteVideo(videoList); 
            },

            // 添加视频
            addVideo() {
                this.$router.push({ path: 'addStudybugVideo' });
            },

            // 编辑
            edit(obj) {
                this.$router.push({ path: `editStudybugVideo/${obj.pId}`});
            },

            // 下架
            unShelve(obj) {
                this.$confirm('确定下架该视频？', '', {
                    closeOnClickModal: false,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: ' ', 
                    title: '  '
                }).then(() => {
                    this.loading = true;
                    updateScholarStatus(obj.pId).then(response => {
                        this.loading = false;
                        this.$message.success(response.data.errorMsg);
                        this.pageQuery.currentpage = 1;
                        this.queryData();
                        this.$message({
                            message: '下架成功！',
                            type: 'success'
                        });
                    }).catch(Error => {
                        this.loading = false
                    })
                }).catch((e) => {
                    this.$message.info('已取消');     
                });
            },
            // 上架
            upShelve(obj) {
                this.$confirm('确定上架该视频？', '', {
                    closeOnClickModal: false,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: ' ', 
                    title: '  '
                }).then(() => {
                    this.loading = true;
                    updateScholarStatus(obj.pId).then(response => {
                        this.loading = false;
                        this.$message.success(response.data.errorMsg);
                        this.pageQuery.currentpage = 1;
                        this.queryData();
                        this.$message({
                            message: '上架成功！',
                            type: 'success'
                        });
                    }).catch(Error => {
                        this.loading = false;
                    })
                }).catch((e) => {
                    this.$message.info('已取消'); 
                });
            },

            // 查看详情
            readVideo(obj) {
                this.$router.push({path: `eStudybugVideoDetail/${obj.pId}`});
            }
        }

    }
</script>

<style lang="scss" scoped>
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        $bgcolor: #fff;
        .app-levelbar {
            height: 35px;
        }
    }
</style>

